import React from 'react';
import {useParams, useHistory} from 'react-router-dom';
import {useTags} from 'hooks/useTags';
import Layout from 'components/Layout';
import Icon from 'components/Icon';
import {Button} from 'components/Button';
import styled from 'styled-components';
import {Input} from 'components/Input';
import {Center} from 'components/Center';
import {Space} from 'components/Space';

type Params = {
    id: string
}
const Topbar = styled.header`
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
`;
const InputWrapper = styled.div`
  background-color: #fff;
  padding: 0 16px;
  margin-top: 16px;
`;
const Tag: React.FC = () => {
    const {findTag, updateTag, deleteTag} = useTags();
    let {id: idString} = useParams<Params>();
    const tag = findTag(parseInt(idString));

    const tagContent = (tag: { id: number, name: string }) => (<div>
        <InputWrapper>
            <Input label='标签名' placeholder='标签名' type='text'
                   value={tag.name}
                   onChange={(e) => {
                       updateTag(tag.id, {name: e.target.value});
                   }}/>
        </InputWrapper>
        <Center>
            <Space/>
            <Space/>
            <Space/>
            <Button onClick={() => deleteTag(tag.id)}>删除标签</Button>
        </Center>
    </div>)
    const history = useHistory()
    const onClickBack = () => {
        history.goBack()
    }
    return (
        <Layout>
            <Topbar>
                <Icon className='xxx' onClick={onClickBack} name="icon-rightarrow-left"/>
                <span>编辑标签</span>
                <Icon/>
            </Topbar>
            {tag ? tagContent(tag) : <div>不存在</div>}
        </Layout>
    );
};
export {Tag};
